﻿<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Laharsub Chat</title>
    <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script src="jquery.pubsub.js"></script>
    <script language="javascript">

        var topicId;

        function getUrlParameters() {
            var vars = [], hash;
            var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
            for (var i = 0; i < hashes.length; i++) {
                hash = hashes[i].split('=');
                vars.push(hash[0]);
                vars[hash[0]] = hash[1];
            }
            return vars;
        }

        function addNotification(text) {
            var div = document.createElement('div');
            var text1 = document.createTextNode(text);
            div.appendChild(text1);
            $("#notifications").append("<p>" + div.innerHTML);
            $("body").attr({ scrollTop: $("body").attr("scrollHeight") });
        }

        function fault(args) {
            $("body").html(args.httpRequest.responseText);
        }

        function onPublish(event) {
            if (event.keyCode == 13) {
                var content = $("#publishText").val();
                $("#publishText").val('');
                if (content && content != '\n') {
                    $.pubsub.publish({
                        topicId: topicId,
                        contentType: "text/plain",
                        body: content,
                        onError: fault
                    })
                }
            }
        }

        function onJoinChatroom(event) {
            window.location = "./jquery.chat.html?id=" + $("#chatRoomId").val() + "&backend=" + $("#chatRoomBackend").val();
        }

        function onCreateChatroom(event) {
            $.pubsub.baseAddress = "../ps/" + $("#newChatRoomBackend").val() + "/";
            $.pubsub.createTopic({
                onSuccess: function (args) {
                    window.location = "./jquery.chat.html?id=" + args.topicId + "&backend=" + $("#newChatRoomBackend").val();
                },
                onError: fault
            });
        }

        $(document).ready(function () {
            var parameters = getUrlParameters();
            if (parameters["id"] && parameters["backend"]) {
                $.pubsub.baseAddress = "../ps/" + parameters["backend"] + "/";
                topicId = parameters["id"];
                $.pubsub.subscribe({
                    topicId: topicId,
                    from: 1,
                    onMessageReceived: function (message) {
                        addNotification(message.body);
                    },
                    onError: fault
                });
                $("#chatPanel").show();
            }
            else {
                $("#chatRoomId").val('');
                $("#configPanel").show();
            }
        });
    </script>
</head>
<body >
    <div id="chatPanel" style="display: none">
        <div id="notifications" style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 16px" ></div>
        <p><textarea id="publishText" rows="3" onkeyup="onPublish(event);" style="width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 16px"></textarea>
    </div>
    <div id="configPanel" style="display: none" style="width: 100%">
        <table cellspacing="2" align="center" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px">
            <tr>
                <td colspan="3" align="center">
                    Choose backend implementation:<br />
                    <select id="newChatRoomBackend" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px">
                        <option value="memory" selected=selected>In memory</option>
                        <!--<option value="sql">SQL 2008 with query notifications</option>-->
                    </select><br /><br />
                    <input type="button" value="Create new chatroom" onclick="onCreateChatroom(event);" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px" />
                </td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td>
                    <hr width="200" />
                </td>
                <td>
                    OR
                </td>
                <td>
                    <hr width="200" />
                </td>
            </tr>
            <tr><td>&nbsp;</td></tr>
            <tr>
                <td colspan="3" align="center">
                    Enter chatroom number:<br />
                    <input id="chatRoomId" type="text" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px" /><br />
                    Choose backend implementation:<br />
                    <select id="chatRoomBackend" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px">
                        <option value="memory" selected=selected>In memory</option>
                        <!--<option value="sql">SQL 2008 with query notifications</option>-->
                    </select><br /><br />
                    <input type="button" value="Join existing chatroom" onclick="onJoinChatroom(event);" style="font-family: Arial, Helvetica, sans-serif; font-size: 16px" />
                </td>
            </tr>
        </table>
    </div>
</body>
</html>
